<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Margin 基础概念</h1>
    
    <ul>
        <li>定义：margin是 CSS 中用于控制元素周围空间的属性。它定义了元素边框（border）与相邻元素之间的距离，这个距离是透明的，不会显示任何内容。</li>
        <li> 语法：margin可以使用一个、两个、三个或四个值来设置。
            <ul>
                <li> 一个值：margin: 10px;，这表示元素的上、下、左、右四个方向的外边距都是10px。</li>
                <li> 两个值：margin: 10px 20px;，第一个值表示元素的上外边距为10px，第二个值表示元素的左右外边距为20px。</li>
                <li> 三个值：margin: 10px 20px 30px;，第一个值是上外边距，第二个值是左右外边距，第三个值是下外边距。</li>
                <li> 四个值：margin: 10px 20px 30px 40px;，分别表示上、右、下、左四个方向的外边距。</li>
            </ul>
    </ul>
   
    举例：
    假设有一个div元素，想要它与周围元素有一定的间隔。
    <div style="width: 100px; height: 100px; background-color: lightblue; margin: 20px;"></div>

    <h3>margin的另一种现象：</h3>
       <p>块元素的margin,在右边的效果展示,左边可以看到间距，但右边看不到间距</p>
    <div style="width: 100%; background-color: red; margin: 180px;">这里div元素设置了width: 100%;这意味着它会先占满其父元素的整个宽度。
        然后，再因为这个div元素设置了margin: 180px;他才会向右缩进180px，所在右边看不到间距了。而且如果一行显示不完，自动换行后会有margin的尺寸大小的内容被遮挡。</div>
        <!-- <div style="overflow: auto;"> -->
        <div style="width: calc(100% - 360px); background-color: red; margin: 180px;">这里使用了calc(100% - 360px)来减少的宽度，以便留出空间显示左右两边的margin,
            这样右边的margin就不会被遮挡了。
        </div>
        <!-- </div> -->
       
        
    <h2>Margin合并</h2>
    <p>Margin合并是指两个或多个<span style="color: red;">块级元素</span>的上下之间的margin值合并为一个值，使得元素的边框与其他元素的边框之间的间隔只取最大的值。</p>
    <p>margin合并的块级元素之间效果如下：</p>
    <div style="border: 1px solid black; margin: 30px;">
        <p style="margin: 5px;">第一个元素</p>
        <p style="margin: 5px;">第二个元素</p>
    </div>
    <div style="border: 1px solid black; margin: 30px;">
        <p style="margin: 25px;">第一个元素上下左右都是25px</p>
        <p style="margin: 10px;">第二个元素，合并了上下间隔为25px， 左右下间隔为10px。</p>
    </div>
    <p>每个div元素的边框都设置了30px的外边距， 但两个div元素的边框之间只有30px的间隔。</p>
   <h3>Margin如果是行元素，则上下的margin不生效，左右不会合并</h3>
   <p style="border: 1px solid black; ">padding左右占用空间，上下不占用空间。绿色的span遮住了这个p标签</p>
   <span style="background-color: purple;">行内margin不合并</span>
    <span style="background-color: red;margin: 50px;">行内margin不合并</span>
    <span style="background-color: blueviolet;margin: 30px;">行内margin不合并</span>
    <span style="background-color: green;padding: 50px;">行内margin不合并</span>
    <span style="background-color: orange;">行内margin不合并</span>
<hr>
    <h2>Margin塌陷</h2>
    <p>红色盒子的margin值是50px，但它并没有距离他的父盒子的顶部50px，子元素设置了margin-top:50px,但这个值被父元素抢走了</p>
    <hr>
   <div style="width: 380px; height: 380px; background-color: lightblue; margin: 10px;">
        <div style="width: 100px; height: 100px; background-color: red; margin: 50px;"></div>
        <div style="width: 100px; height: 100px; background-color: green; margin: 20px;"></div>
   </div>
   <p>然后，如果把上面的案例的height去掉，然后还要加个padding或padding-top: 1px;就不会出现塌陷现象了</p>
   <hr>
   <div style="padding-top: 1px; width: 380px;  background-color: lightblue; margin: 10px;">
        <div style="width: 100px; height: 100px; background-color: red; margin: 50px;"></div>
        <div style="width: 100px; height: 100px; background-color: green; margin: 30px;"></div>
   </div>
   <hr>
   <p>上面的方法，改变了父元素的高度，还有一种方法，就是给父元素设置overflow:hidden;，这样子元素的margin不会超出父元素的范围，就不会塌陷了。</p>
   <div style="overflow: hidden; width: 380px; height: 380px; background-color: lightblue; margin: 10px;">
    <div style="width: 100px; height: 100px; background-color: red; margin: 50px;"></div>
    <div style="width: 100px; height: 100px; background-color: green; margin: 20px;"></div>
</div> 
   <p>margin塌陷的行内元素之间效果如下：</p>
    <p style="border: 1px solid black; margin: 30px;">块元素</p>
    <span style="border: 1px solid black; margin: 10px;">行内元素，和上面的块元素的间距值为上面的块元素的margin值，所以间距为30px，这里 margin: 50px;修改左右下生效，上不会生效。</span>
   
    <hr>
   
    
</body>
</html>